<template>
  <view class="intro-container container"
    :style="[
      {'background-image':(`url(${staticImgs.page})`)}
    ]"
  >
    <view class="back-wrapper" @click.stop="backHandle">
      <image class="img" :src="staticImgs.backIcon" mode=""></image>
    </view>
    
    <template>
      <template v-if="staticImgs.btnImg">
        <view class="full-page-intro-btn-wrapper" >
          <view class="full-page-intro-btn-inner">
            <view
              class="price-wrapper"
              :style="{'background-image': `url(${staticImgs.priceBg})`}"
              v-if="isShowPrice"
            >
              <view class="price">
                <text class="unit">¥</text>
                {{price}}
              </view>
              <template v-if="sclInfo.discountUid">              
                <view class="text">券后</view>
                <view class="price">
                  <text class="unit">¥</text>
                  {{viewPrice}}
                </view>
              </template>
              
            </view>
            <view @click="startScl()" class="btn">
              <image style="width: 100%;height: 100%;" :src="staticImgs.btnImg"></image>
            </view>
          </view>
        </view>
      </template>
    </template>
    
    <view v-if="showPrivacyTip" class="privacy-tip-text" >
      为向您提供服务，请您如实、准确填写以上信息提交即表示您同意上海开怀大笑健康管理咨询有限公司收集前述信息、为您提供服务。仅供娱乐，内部使用。
    </view>
  </view>
</template>

<script>
  export default {
    name: 'SclIntroPageType06',
    props:{
      sclInfo:{
        type:Object,
        default:()=>{}
      },
      showPrivacyTip:{
        type:Boolean,
        default:false
      },
      isShowPriceWrapper:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        fullPageImg: '',
        staticImgs:{
          page:this.imgBaseURL + "/scl/result/X06/intro.jpg",
          btnImg:this.imgBaseURL + "/scl/result/X06/intro-btn.png",
          backIcon:this.imgBaseURL + "/scl/result/X06/back.png",
          priceBg:this.imgBaseURL + "/scl/result/X06/btn-bg-1.png"
        },
        viewPrice:0,
        price:0,
      }
    },
    watch:{
      sclInfo:{
        handler(val){
          if(val){
            console.log(val,'----v----')
            this.initCompData(val)
          }
        },
        immediate:true
      }
    },
    computed:{
      isShowPrice(){
        return this?.sclInfo?.newOriginalPrice > 0 && this.isShowPriceWrapper
      }
    },
    mounted() {
      
    },
    methods:{
      initCompData(val){
        console.log(val)
        
        const {detailInfo} = val
        const tmpObj = JSON.parse(detailInfo || '{}')
        
        
        this.viewPrice = val?.discountUid ? val.discountPrice : val.newOriginalPrice
        this.price = val.newOriginalPrice
        // this.staticImgs.page = tmpObj.fullImg
        // this.staticImgs.btnImg = tmpObj.introBtn
        // this.staticImgs.backIcon = tmpObj.backImg
        
        console.log(this.staticImgs,'======staticImgs======')
        // this.staticImgs.backImg = tmpObj.
        
      },
      startScl(){
        this.$emit('startScl')
      },
      backHandle(){
        this.$emit('backHandle')
      }
    }
  }
</script>

<style lang="scss" scoped>
.intro-container{
    background-size: cover;

    .btn-wrapper {
      width: 100vw;
      height: 140rpx;
      // background-color: red;
      position: fixed;



      .btn-inner-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;


        .main-img {
          width: 590rpx;
          height: 158rpx;
        }



        .img {
          position: absolute;
          width: 166rpx;
          height: 166rpx;

          bottom: -100rpx;
          right: 84rpx;
        }

      }


      .intro-text {
        margin-top: 24rpx;
        text-align: center;
        font-size: 20rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #FCE0DE;
        line-height: 28rpx;
      }


    }


    .privacy-tip-text {
      position: fixed;
      bottom: 4vh;

      text-align: center;
      padding: 80rpx 106rpx;
      left: 0;
      right: 0;
      font-size: 18rpx;

      font-family: PingFangSC, PingFang SC;
      font-weight: 400;

      color: #D07E46;
      line-height: 25rpx;
      text-align: center;
      font-style: normal;
    }


    .back-wrapper {
      position: fixed;
      z-index: 2;
      bottom: calc(340rpx + constant(safe-area-inset-bottom));
      bottom: calc(340rpx + env(safe-area-inset-bottom));


      left: -6rpx;
      display: flex;
      align-items: center;
      height: 100rpx;
      width: 134rpx;
      

      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .full-page-intro-btn-wrapper {
    position: fixed;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    bottom: 60rpx;
  
    .full-page-intro-btn-inner {
      position: relative;
      display: flex;
      width: 750rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .price-wrapper{
        width: 552rpx;
        height: 90rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
        
        .price{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #FBD8A6;
          // line-height: 40rpx;
          font-style: normal;
          .unit{
            font-size: 21rpx;
          }
        }
        
        
        .text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #FBD8A6;
          // line-height: 42rpx;
          // text-align: left;
          font-style: normal;
          margin-left: 20rpx;
          margin-right: 6rpx;
        }
      }
      
      .btn{
        width: 450rpx;
        height: 100rpx;
      }
  
      .hand-img {
        width: 166rpx;
        height: 166rpx;
        position: absolute;
        right: 10%;
  
      }
    }
  
  }

</style>